<template>
  <div class="image-preview-container" :style="containerStyle">
    <!-- 根据multiple属性决定展示单张还是多张 -->
    <template v-if="multiple && realSrcList && realSrcList.length > 0">
      <!-- 多图模式 -->
      <el-image
          v-for="(srcItem, index) in realSrcList"
          :key="index"
          :src="srcItem"
          fit="cover"
          :style="`width:${realWidth};height:${realHeight};`"
          :preview-src-list="realSrcList"
          class="image-item"
          :preview-teleported="true"
      >
        <template #error>
          <div class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </template>
      </el-image>
    </template>
    <template v-else>
      <!-- 单图模式 -->
      <el-image
          v-if="realSrcList && realSrcList.length > 0"
          :src="realSrc"
          fit="cover"
          :style="`width:${realWidth};height:${realHeight};`"
          :preview-src-list="realSrcList"
          class="single-image"
          :preview-teleported="true"
      >
        <template #error>
          <div class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </template>
      </el-image>
    </template>
  </div>
</template>

<script setup>
import {computed} from 'vue';
import {isExternal} from "@/utils/validate";
import {ElImage} from 'element-plus';

const props = defineProps({
  src: {
    type: String,
    default: ""
  },
  width: {
    type: [Number, String],
    default: "30px"
  },
  height: {
    type: [Number, String],
    default: "30px"
  },
  // 控制是否展示多张图片，默认false（单张）
  multiple: {
    type: Boolean,
    default: false
  },
  // 图片之间的间距，单位px（仅在多图模式生效）
  gap: {
    type: Number,
    default: 8
  }
});

// 计算处理后的单张图片地址
const realSrc = computed(() => {
  if (!props.src) {
    return;
  }
// 仅当 src 是字符串类型时才进行拆分处理
  let real_src = ''

  if (typeof props.src === 'string') {
    // 拆分并过滤空字符串，取第一个有效元素
    const srcArray = props.src.split(',').filter(item => item.trim() !== '');
    real_src = srcArray.length > 0 ? srcArray[0] : '';
  } else if (Array.isArray(props.src)) {
    // 过滤空字符串，取第一个有效元素
    const validSrcs = props.src.filter(item => typeof item === 'string' && item.trim() !== '');
    real_src = validSrcs.length > 0 ? validSrcs[0] : '';
  } else {
    real_src = '';
  }

  if (isExternal(real_src)) {
    return real_src;
  }
  return '';
  // return import.meta.env.VITE_APP_BASE_API + real_src;
});

// 计算处理后的图片列表
const realSrcList = computed(() => {
  if (!props.src) {
    return;
  }
  let real_src_list=[]
  if (typeof props.src === 'string') {
    real_src_list = props.src.split(",");
  } else {
    real_src_list = props.src;
  }
  let srcList = [];
  real_src_list.forEach(item => {
    if (isExternal(item)) {
      srcList.push(item);
    } else {
      // srcList.push(import.meta.env.VITE_APP_BASE_API + item);
    }
  });
  return srcList;
});

// 处理宽度
const realWidth = computed(() => {
  return typeof props.width === "string" ? props.width : `${props.width}px`;
});

// 处理高度
const realHeight = computed(() => {
  return typeof props.height === "string" ? props.height : `${props.height}px`;
});

// 容器样式（多图模式下生效）
const containerStyle = computed(() => {
  if (props.multiple) {
    return {
      display: "flex",
      flexWrap: "wrap",
      gap: `${props.gap}px`
    };
  }
  return {};
});
</script>

<style lang="scss" scoped>
.image-item, .single-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;

  :deep(.el-image__inner) {
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.2);
    }
  }

  :deep(.image-slot) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}

</style>
